<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点餐小程序管理后台</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        .header {
            background-color: #409EFF;
            color: white;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 60px;
        }
        .logo {
            font-size: 20px;
            font-weight: bold;
        }
        .main-container {
            display: flex;
            height: calc(100vh - 60px);
        }
        .sidebar {
            width: 200px;
            background-color: #304156;
            overflow-y: auto;
        }
        .content {
            flex: 1;
            padding: 20px;
            background-color: #f0f2f5;
            overflow-y: auto;
        }
        .welcome-card {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .stat-number {
            font-size: 32px;
            font-weight: bold;
            color: #409EFF;
            margin-bottom: 10px;
        }
        .stat-label {
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 头部 -->
        <div class="header">
            <div class="logo">点餐小程序管理后台</div>
            <div>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        管理员<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人设置</el-dropdown-item>
                        <el-dropdown-item divided>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>

        <!-- 主体容器 -->
        <div class="main-container">
            <!-- 侧边栏 -->
            <div class="sidebar">
                <el-menu
                    default-active="dashboard"
                    class="el-menu-vertical"
                    background-color="#304156"
                    text-color="#bfcbd9"
                    active-text-color="#409EFF"
                    @select="handleMenuSelect">
                    <el-menu-item index="dashboard">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">仪表盘</span>
                    </el-menu-item>
                    <el-submenu index="dish">
                        <template slot="title">
                            <i class="el-icon-food"></i>
                            <span>菜品管理</span>
                        </template>
                        <el-menu-item index="category">分类管理</el-menu-item>
                        <el-menu-item index="dish-list">菜品列表</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="orders">
                        <i class="el-icon-s-order"></i>
                        <span slot="title">订单管理</span>
                    </el-menu-item>
                    <el-menu-item index="users">
                        <i class="el-icon-user"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="settings">
                        <i class="el-icon-setting"></i>
                        <span slot="title">系统设置</span>
                    </el-menu-item>
                </el-menu>
            </div>

            <!-- 内容区域 -->
            <div class="content">
                <!-- 仪表盘 -->
                <div v-show="currentPage === 'dashboard'">
                    <div class="welcome-card">
                        <h2>欢迎使用点餐小程序管理后台</h2>
                        <p>这里是您管理餐厅业务的中心控制台</p>
                    </div>
                    
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-number">{{stats.totalOrders}}</div>
                            <div class="stat-label">总订单数</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">{{stats.totalUsers}}</div>
                            <div class="stat-label">注册用户</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">{{stats.totalDishes}}</div>
                            <div class="stat-label">菜品数量</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">¥{{stats.totalRevenue}}</div>
                            <div class="stat-label">总营收</div>
                        </div>
                    </div>
                </div>

                <!-- 分类管理 -->
                <div v-show="currentPage === 'category'">
                    <el-card>
                        <div slot="header">
                            <span>分类管理</span>
                            <el-button style="float: right;" type="primary" @click="showAddCategory = true">添加分类</el-button>
                        </div>
                        <el-table :data="categories" style="width: 100%">
                            <el-table-column prop="name" label="分类名称"></el-table-column>
                            <el-table-column prop="type" label="类型">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.type === 1 ? 'primary' : 'success'">
                                        {{scope.row.type === 1 ? '菜品分类' : '套餐分类'}}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sort" label="排序"></el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="editCategory(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="deleteCategory(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>

                <!-- 其他页面占位 -->
                <div v-show="currentPage === 'dish-list'">
                    <el-card>
                        <div slot="header">菜品列表</div>
                        <p>菜品管理功能开发中...</p>
                    </el-card>
                </div>

                <div v-show="currentPage === 'orders'">
                    <el-card>
                        <div slot="header">订单管理</div>
                        <p>订单管理功能开发中...</p>
                    </el-card>
                </div>

                <div v-show="currentPage === 'users'">
                    <el-card>
                        <div slot="header">用户管理</div>
                        <p>用户管理功能开发中...</p>
                    </el-card>
                </div>

                <div v-show="currentPage === 'settings'">
                    <el-card>
                        <div slot="header">系统设置</div>
                        <p>系统设置功能开发中...</p>
                    </el-card>
                </div>
            </div>
        </div>

        <!-- 添加分类对话框 -->
        <el-dialog title="添加分类" :visible.sync="showAddCategory" width="500px">
            <el-form :model="categoryForm" label-width="80px">
                <el-form-item label="分类名称">
                    <el-input v-model="categoryForm.name"></el-input>
                </el-form-item>
                <el-form-item label="分类类型">
                    <el-select v-model="categoryForm.type" placeholder="请选择">
                        <el-option label="菜品分类" :value="1"></el-option>
                        <el-option label="套餐分类" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="categoryForm.sort" :min="0"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showAddCategory = false">取消</el-button>
                <el-button type="primary" @click="addCategory">确定</el-button>
            </div>
        </el-dialog>
    </div>

    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    currentPage: 'dashboard',
                    baseUrl: 'http://localhost:8080',
                    stats: {
                        totalOrders: 0,
                        totalUsers: 0,
                        totalDishes: 0,
                        totalRevenue: 0
                    },
                    categories: [],
                    showAddCategory: false,
                    categoryForm: {
                        name: '',
                        type: 1,
                        sort: 0
                    }
                }
            },
            mounted() {
                this.loadStats();
                this.loadCategories();
            },
            methods: {
                handleMenuSelect(key) {
                    this.currentPage = key;
                    if (key === 'category') {
                        this.loadCategories();
                    }
                },
                async loadStats() {
                    // 模拟数据，实际应该从后端获取
                    this.stats = {
                        totalOrders: 156,
                        totalUsers: 89,
                        totalDishes: 23,
                        totalRevenue: 12580
                    };
                },
                async loadCategories() {
                    try {
                        const response = await axios.post(`${this.baseUrl}/mini/category/list`);
                        if (response.data.code === 1) {
                            this.categories = response.data.data || [];
                        }
                    } catch (error) {
                        console.error('加载分类失败', error);
                        this.$message.error('加载分类失败');
                    }
                },
                async addCategory() {
                    try {
                        const response = await axios.post(`${this.baseUrl}/admin/category/save`, this.categoryForm);
                        if (response.data.code === 1) {
                            this.$message.success('添加成功');
                            this.showAddCategory = false;
                            this.categoryForm = { name: '', type: 1, sort: 0 };
                            this.loadCategories();
                        } else {
                            this.$message.error(response.data.msg || '添加失败');
                        }
                    } catch (error) {
                        console.error('添加分类失败', error);
                        this.$message.error('添加分类失败');
                    }
                },
                editCategory(category) {
                    this.$message.info('编辑功能开发中...');
                },
                async deleteCategory(id) {
                    try {
                        await this.$confirm('确认删除该分类吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        });
                        
                        const response = await axios.post(`${this.baseUrl}/admin/category/delete`, { id });
                        if (response.data.code === 1) {
                            this.$message.success('删除成功');
                            this.loadCategories();
                        } else {
                            this.$message.error(response.data.msg || '删除失败');
                        }
                    } catch (error) {
                        if (error !== 'cancel') {
                            console.error('删除分类失败', error);
                            this.$message.error('删除分类失败');
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>